<template>
	<view class="page-profile-content">
		<form @submit="handleSave">
			<view class="photo-block">
				<button hover-class="none" class="photo-btn" @chooseavatar="photoChoose" open-type="chooseAvatar">
					<image :src="form.avatar_url" class="photo"></image>
				</button>
			</view>
			<view class="nickname-block">
				<view class="label">昵称</view>
				<input name="nick_name" type="nickname" maxlength="16" placeholder="请输入昵称" v-model="form.nick_name" />
			</view>
			<button hover-class="none" class="btn normal" style="margin-top: 50rpx;" form-type="submit">保存</button>
		</form>
	</view>
</template>

<script>
	import {getSelfInfo, saveUser} from '@/api/user.js';
	import {uploadFile} from '@/api/file.js'
	export default {
		data() {
			return {
				form:{
					avatar_url:'',
					nick_name:''
				}
			}
		},
		methods:{
			photoChoose(e){
				const filePath=e.detail.avatarUrl;
				uni.showLoading({
					title:'上传中',
					mask:true,
				})
				uploadFile(filePath,true).then((res)=>{
					const data=JSON.parse(res.data);
					uni.hideLoading()
					if(data.status==1){
						this.utils.showToast('上传成功')
						this.form.avatar_url=data.data.url
					}else{
						this.utils.showToast(data.message)
					}
				}).catch((res)=>{
					uni.hideLoading()
					this.utils.showToast('上传失败');
				})
			},
			getUser(){
				uni.showLoading({
					title:'加载中',
					mask:true,
				})
				getSelfInfo().then((res)=>{
					uni.hideLoading()
					if(res.status==1){
						this.form.avatar_url=res.data.avatar_url?res.data.avatar_url:'/static/mine/user_photo.png';
						this.form.nick_name=res.data.nick_name;
					}else{
						this.utils.showToast(res.message);
					}
				}).catch((res)=>{
					uni.hideLoading()
					this.utils.showToast('登录失败！');
				})
			},
			handleSave(e){
				let form={nick_name:e.detail.value.nick_name,avatar_url:this.form.avatar_url};
				if(!form.avatar_url||form.avatar_url=='/static/mine/user_photo.png'){
					this.utils.showToast('请上传头像');
					return;
				}
				if(!form.nick_name){
					this.utils.showToast('请输入昵称')
					return;
				}
				uni.showLoading({
					title:'提交中',
					mask:true,
				})
				saveUser(form).then((res)=>{
					uni.hideLoading();
					if(res.status==1){
						this.utils.showToast('保存成功')
						uni.$emit('loginEvent',{});
					}else{
						this.utils.showToast(res.message)
					}
				}).catch((res)=>{
					uni.hideLoading();
					this.utils.showToast('保存失败')
				})
			}
		},
		onLoad() {
			this.getUser();
		}
	}
</script>

<style lang="scss" scoped>
	.page-profile-content {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 30rpx 40rpx;
		display: flex;
		flex-direction: column;

		.photo-block {
			margin-top: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}

		.photo-btn,
		.photo {
			width: 150rpx;
			height: 150rpx;
			border-radius: 100%;
			padding: 0;
		}

		.nickname-block {
			display: flex;
			flex-direction: row;
			margin-top: 50rpx;
			border: 1px solid #efefef;
			border-right: none;
			border-left: none;
			align-items: center;
			padding: 20rpx 30rpx;

			.label {
				width: 140rpx;
				font-size: 28rpx;
				margin-right: 20rpx;
			}

			input {
				width: calc(100% - 160rpx);
				font-size: 28rpx;
			}
		}
	}
</style>
